import {memo} from 'react'
interface IProps {
    // 封面
    cover?: string
    // 歌单名称
    name?: string
    // 点击播放
    clickPlay?: () => void
}
function CardAlbums(props: IProps) {
  const {cover = 'https://picsum.photos/seed/picsum/200/300', name = '一曲青衣·浮生梦', clickPlay} = props
  return (
    <div className='w-full h-full bg-white bordeer border-solid rounded relative select-none'>
      <div className='relative w-full h-3/4 group'>
        <img src={cover} alt='album cover' className='w-full h-full object-cover rounded-t' />
        <div className='absolute bottom-0 left-0 w-3/5 rounded-tr-full p-2 text-white bg-primary-500/80'>Daily 30</div>
        <div className='absolute top-0 left-0 w-full h-full hidden group-hover:block rounded bg-black/30 from-transparent transition duration-200'>
          <div onClick={clickPlay} className='absolute bottom-4 left-2 cursor-pointer w-16 h-6 leading-6 bg-white/70 rounded-full transform text-primary-800 text-center active:scale-90'>▶</div>
        </div>
      </div>
      <div className='relative p-2'>
        <p className='text-basr font-bold'>{name}</p>
        <span className='text-gray-400 text-sm'>每日30首</span>
      </div>
    </div>
  )
}

export default memo(CardAlbums)
